﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>editprofile-编辑个人资料</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/mui.picker.css">
		<link rel="stylesheet" href="css/mui.poppicker.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.mui-views,
			.mui-view,
			.mui-pages,
			.mui-page,
			.mui-page-content {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background-color: #efeff4;
			}
			
			.mui-pages {
				top: 46px;
				height: auto;
			}
			
			.mui-scroll-wrapper,
			.mui-scroll {
				background-color: #efeff4;
			}
			
			.mui-page.mui-transitioning {
				-webkit-transition: -webkit-transform 200ms ease;
				transition: transform 200ms ease;
			}
			
			.mui-page-left {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}
			
			.mui-ios .mui-page-left {
				-webkit-transform: translate3d(-20%, 0, 0);
				transform: translate3d(-20%, 0, 0);
			}
			
			.mui-navbar {
				position: fixed;
				right: 0;
				left: 0;
				z-index: 10;
				height: 44px;
				background-color: #f7f7f8;
			}
			
			.mui-navbar .mui-bar {
				position: absolute;
				background: transparent;
				text-align: center;
			}
			
			.mui-android .mui-navbar-inner.mui-navbar-left {
				opacity: 0;
			}
			
			.mui-ios .mui-navbar-left .mui-left,
			.mui-ios .mui-navbar-left .mui-center,
			.mui-ios .mui-navbar-left .mui-right {
				opacity: 0;
			}
			
			.mui-navbar .mui-btn-nav {
				-webkit-transition: none;
				transition: none;
				-webkit-transition-duration: .0s;
				transition-duration: .0s;
			}
			
			.mui-navbar .mui-bar .mui-title {
				display: inline-block;
				position: static;
				width: auto;
			}
			
			.mui-page-shadow {
				position: absolute;
				right: 100%;
				top: 0;
				width: 16px;
				height: 100%;
				z-index: -1;
				content: '';
			}
			
			.mui-page-shadow {
				background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
				background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
			}
			
			.mui-navbar-inner.mui-transitioning,
			.mui-navbar-inner .mui-transitioning {
				-webkit-transition: opacity 200ms ease, -webkit-transform 200ms ease;
				transition: opacity 200ms ease, transform 200ms ease;
			}
			
			.mui-page {
				display: none;
			}
			
			.mui-pages .mui-page {
				display: block;
			}
			
			.mui-page .mui-table-view:first-child {
				margin-top: 15px;
			}
			
			.mui-page .mui-table-view:last-child {
				margin-bottom: 30px;
			}
			
			.mui-table-view {
				margin-top: 20px;
			}
			
			.mui-table-view:after {
				height: 0;
			}
			
			.mui-table-view span.mui-pull-right {
				color: #999;
			}
			
			.mui-table-view-divider {
				background-color: #efeff4;
				font-size: 14px;
			}
			
			.mui-table-view-divider:before,
			.mui-table-view-divider:after {
				height: 0;
			}
			
			.mui-content-padded {
				margin: 10px 0px;
			}
			
			.mui-locker {
				margin: 35px auto;
				display: none;
			}
		</style>
	</head>

	<body>
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="editprofile" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">编辑个人资料</h1>
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<a style="height:3rem;line-height: 3rem;color: #000000;">个人资料</a>
						<form class="mui-input-group">
							<div class="mui-input-row" style="font-size: 6vw;height: 5rem;">
								<img class="mui-btn-link" id="myphoto" style="position: absolute;height: 5rem;width: 4rem;border-radius: 5rem;border: none;" src="images/user-photo.png" />
								<div id="vip" style="position:absolute; z-index:2;left:20px;top:12px;color:#FFFF00;display:inline-block;">VIP</div>
								<a style="font-size: 6vw;height: 2rem;" id='headImg' class="mui-navigate-right mui-btn-link">
									<span id='headImg' style="position: absolute;left:7rem;bottom:2rem;">改变头像</span>
								</a>
							</div>
							<div class="mui-input-row">
								<label>昵称</label>
								<a style="line-height: 2.5rem;height: 2rem;" id='account' class="mui-navigate-right mui-btn-link"><span id='account'></span></a>
							</div>
							<div class="mui-input-row">
								<label>爸妈圈ID</label>
								<a style="line-height: 2.5rem;height: 2rem;color: #000000;" id='bmqid' >018010106</a>
							</div>
							<div class="mui-input-row">
								<label>性别</label>
								<a style="line-height: 2.5rem;height: 2rem;" id='sex' class="mui-navigate-right mui-btn-link">男</a>
							</div>
							<div class="mui-input-row">
								<label>地区</label>
								<a style="line-height: 2.5rem;height: 2rem;" id='zone' class="mui-navigate-right mui-btn-link">上海</a>
							</div>
							<div class="mui-input-row">
								<label>生日</label>
								<a style="line-height: 2.5rem;height: 2rem;" id='birthday' class="mui-navigate-right mui-btn-link">1978-08-17</a>
							</div>
						</form>
						<a style="height:3rem;line-height: 3rem;color: #000000;">更多资料</a>
						<form class="mui-input-group">
							<div class="mui-input-row">
								<label>特长</label>
								<a style="line-height: 2.5rem;height: 2rem;" id='specialty' class="mui-navigate-right mui-btn-link">烹饪、棒球</a>
							</div>
							<div class="mui-input-row">
								<label>兴趣爱好</label>
								<a id='interest' class="mui-navigate-right mui-btn-link">美食、健身、宠物、花卉、<br/>养生</a>
							</div>
						</form>
					</div>
				</div>
			</div>
			<!--页面主内容区结束-->
		</div>

	</body>
	<script src="js/mui.min.js "></script>
	<script src="js/mui.view.js "></script>
	<script src="js/mui.picker.js"></script>
	<script src="js/mui.poppicker.js"></script>
	<script src="js/city.data.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/app.js"></script>
	<script>
		mui.init();
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#editprofile'
		});
		mui.plusReady(function() {
			/**
			 * 获取对象属性的值
			 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
			 * @param {Object} obj 对象
			 * @param {String} param 属性名
			 */
			var _getParam = function(obj, param) {
				return obj[param] || '';
			};
					
			var account = document.getElementById('account');
			var headImage = document.getElementById('myphoto');
			account.innerText = plus.storage.getItem("name");
			headImage.src = plus.storage.getItem("headimgurl");
			var viplevel = plus.storage.getItem("vip");
			if (viplevel == null || viplevel == "0") {
				plus.storage.setItem("vip", "0");
				document.getElementById('vip').style.display = "none";
			} else {
				document.getElementById('vip').innerText = "VIP" + viplevel;
				document.getElementById('vip').style.display = "inline-block";
			}

			document.getElementById('headImg').addEventListener('tap', function() {
				if(mui.os.plus) {
					var a = [{
						title: '拍照'
					}, {
						title: '从手机相册选择'
					}];
					plus.nativeUI.actionSheet({
						title: '修改头像',
						cancel: '取消',
						buttons: a
					}, function(b) {
						switch(b.index) {
							case 0:
								break;
							case 1:
								//拍照
								getImages();
								break;
							case 2:
								//打开相册
								galleryImages();
								break;
							default:
								break;
						}
					}, false);
				}
			});
			
			document.getElementById('account').addEventListener('tap', function(e) {
				//修改为新昵称
				e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
				var btnArray = ['取消', '确定'];
				mui.prompt('请输入你的新昵称', account.innerText, '爸妈Q', btnArray, function(e) {
					if (e.index == 1) {
						//alert(e.value);
						account.innerText = e.value;
					} else {
						plus.nativeUI.toast('你点了取消按钮');
					}
				})
			});
			
			document.getElementById('sex').addEventListener('tap', function() {
				if(mui.os.plus) {
					var a = [{
						title: '男'
					}, {
						title: '女'
					}];
					plus.nativeUI.actionSheet({
						title: '修改性别',
						cancel: '取消',
						buttons: a
					}, function(b) {
						switch(b.index) {
							case 0:
								plus.nativeUI.toast('你点了取消按钮');
								break;
							case 1:
								document.getElementById('sex').innerText = '男';
								break;
							case 2:
								document.getElementById('sex').innerText = '女';
								break;
							default:
								break;
						}
					}, false);
				}
			});
			
			//省市二级联动
			var cityPicker = new mui.PopPicker({
				layer: 2
			});
			cityPicker.setData(cityData);
			document.getElementById('zone').addEventListener('tap', function(e) {
				//alert('zone');
				cityPicker.show(function(items) {
					document.getElementById('zone').innerText = items[0].text + " " + items[1].text;
					//返回 false 可以阻止选择框的关闭
					//return false;
				});
			}, false);
			
			document.getElementById('birthday').addEventListener('tap', function() {
				var dDate = new Date();
				dDate.setFullYear(dDate.getFullYear(), (dDate.getMonth() + 1), dDate.getDate());
				var minDate = new Date();
				minDate.setFullYear(1900, 0, 1);
				var maxDate = new Date();
				maxDate.setFullYear(2020, 11, 31);
				plus.nativeUI.pickDate(function(e) {
					var d = e.date;
					document.getElementById('birthday').innerText = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
				}, function(e) {
					plus.nativeUI.toast('您没有选择日期');
				}, {
					title: "请选择日期",
					date: dDate,
					minDate: minDate,
					maxDate: maxDate
				});
			});
			
			//拍照
			function getImages() {
				var mobileCamera = plus.camera.getCamera();
				mobileCamera.captureImage(function(e) {
					plus.io.resolveLocalFileSystemURL(e, function(entry) {
						var path = entry.toLocalURL() + '?version=' + new Date().getTime();
						uploadHeadImg(path);
					}, function(err) {
						console.log("读取拍照文件错误");
					});
				}, function(e) {
					console.log("er", err);
				}, function() {
					filename: '_doc/head.png';
				});
			}

			//从本地相册选择
			function galleryImages() {
				console.log("你选择了从相册选择");
				plus.gallery.pick(function(a) {
					plus.io.resolveLocalFileSystemURL(a, function(entry) {
						plus.io.resolveLocalFileSystemURL('_doc/', function(root) {
							root.getFile('head.png', {}, function(file) {
								//文件已经存在
								file.remove(function() {
									console.log("文件移除成功");
									entry.copyTo(root, 'head.png', function(e) {
										var path = e.fullPath + '?version=' + new Date().getTime();
										uploadHeadImg(path);
									}, function(err) {
										console.log("copy image fail: ", err);
									});
								}, function(err) {
									console.log("删除图片失败：（" + JSON.stringify(err) + ")");
								});
							}, function(err) {
								//打开文件失败
								entry.copyTo(root, 'head.png', function(e) {
									var path = e.fullPath + '?version=' + new Date().getTime();
									uploadHeadImg(path);
								}, function(err) {

									console.log("上传图片失败：（" + JSON.stringify(err) + ")");
								});
							});
						}, function(e) {
							console.log("读取文件夹失败：（" + JSON.stringify(err) + ")");
						});
					});
				}, function(err) {
					console.log("读取拍照文件失败: ", err);
				}, {
					filter: 'image'
				});
			};

			//上传图片
			function uploadHeadImg(imgPath) {
				//选中图片之后，头像当前的照片变为选择的照片
				var mainImg = document.getElementById('myphoto');
				mainImg.src = imgPath;

				/*var images = new Image();
				images.src = imgPath;
				var imgData = getBase64Image(images);
				mui.ajax('http://127.0.0.1/uploadHeadImg', {
					data: {
						'imgDatas': imgData
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						if(data.status == '1') {
							mui.alert('上传成功！');
						}
					},
					error: function(xhr, type, errorThrown) {
						if(type == 'timeout') {
							mui.alert('服务器连接超时，请稍后再试');
						}
					}
				});*/
			}

			//压缩图片转成base64
			function getBase64Image(img) {
				var canvas = document.createElement("canvas");
				var width = img.width;
				var height = img.height;
				if(width > height) {
					if(width > 100) {
						height = Math.round(height *= 100 / width);
						width = 100;
					}
				} else {
					if(height > 100) {
						width = Math.round(width *= 100 / height);
					}
					height = 100;
				}

				canvas.width = width;
				canvas.height = height;
				var ctx = canvas.getContext('2d');
				ctx.drawImage(img, 0, 0, width, height);

				var dataUrl = canvas.toDataURL('image/png', 0.8);
				return dataUrl.replace('data:image/png:base64,', '');
			}
		});
	</script>

</html>